<template>
  <div class="container mt-5">
    <form action="" class="mb-4">
      <div class="mb-3">
        <input type="text" v-model="type_item.name" placeholder="类型名" class="form-control">
      </div>
      <div class="mb-3">
        <input type="text" v-model="type_item.code" placeholder="类型码" class="form-control">
      </div>
      <button @click.prevent="add_type" class="btn btn-primary">添加</button>
    </form>

    <button @click="get_douban_movies" class="btn btn-success mb-4">获取豆瓣电影</button>

    <!-- Toast 组件 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">成功</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          添加成功！
        </div>
      </div>
    </div>

    <!-- 查询电影标题的表单 -->
    <div class="mb-4">
      <div class="input-group">
        <input type="text" v-model="query_n" placeholder="请输入 n 的值" class="form-control">
        <button @click="query_movies_by_n" class="btn btn-warning">查询电影标题</button>
      </div>
    </div>

    <!-- 电影标题列表 -->
    <div v-if="titles_data.length > 0" class="mb-4">
      <h3>电影标题列表</h3>
      <div class="row">
        <div class="col-md-4 mb-4" v-for="(title, index) in titles_data" :key="index">
          <div class="card glass-card">
            <div class="card-body">
              <h5 class="card-title">{{ title.TITLE }}</h5>
              <p class="card-text">评分：{{ title.SCORE }}</p>
              <p class="card-text">票房：{{ title.BOXOFFICE }}</p>
              <a :href="title.URL" target="_blank" class="btn btn-info">豆瓣链接</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 豆瓣电影列表 -->
    <div v-if="movies_data.length > 0" class="mb-4">
      <h3>豆瓣电影列表</h3>
      <div class="row">
        <div class="col-md-4 mb-4" v-for="(item, index) in movies_data" :key="index">
          <div class="card glass-card">
            <div class="card-body">
              <h5 class="card-title">{{ item.TITLE }}</h5>
              <p class="card-text">评分：{{ item.SCORE }}</p>
              <p class="card-text">票房：{{ item.BOXOFFICE }}</p>
              <a :href="item.URL" target="_blank" class="btn btn-info">豆瓣链接</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { Toast } from 'bootstrap' // 引入 Bootstrap 的 Toast

// 初始化 movies_data 为空数组
const movies_data = ref([])

// 初始化 type_item 对象
const type_item = reactive({ code: '', name: '' })

// 查询 n 的值
const query_n = ref('')

// 电影标题列表
const titles_data = ref([])

// 获取豆瓣电影数据
const get_douban_movies = function () {
  const url = 'http://127.0.0.1:8000/api/douban_n?n=1000'
  axios.get(url).then(res => {
    // 确保返回的数据是数组格式
    if (Array.isArray(res.data.data)) {
      movies_data.value = res.data.data
    } else {
      console.error('返回的数据格式不正确，应为数组')
    }
  }).catch(error => {
    console.error('获取豆瓣电影数据失败：', error.message)
  })
}

// 添加类型
const add_type = function () {
  // 使用 URLSearchParams 将数据转换为 application/x-www-form-urlencoded 格式
  const params = new URLSearchParams()
  params.append('code', type_item.code)
  params.append('name', type_item.name)

  const url = 'http://127.0.0.1:8000/api/add_type'
  axios.post(url, params, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  }).then(res => {
    console.log('添加类型成功：', res.data)
    // 显示 Toast
    const toast = new Toast(document.getElementById('successToast'))
    toast.show()
    // 清空表单
    type_item.code = ''
    type_item.name = ''
  }).catch(error => {
    console.error('添加类型失败：', error.message)
  })
}

// 根据 n 查询电影标题
const query_movies_by_n = function () {
  if (!query_n.value) {
    alert('请输入 n 的值')
    return
  }

  const url = `http://127.0.0.1:8000/api/title?n=${query_n.value}`
  axios.get(url).then(res => {
    if (Array.isArray(res.data.data)) {
      titles_data.value = res.data.data
    } else {
      console.error('返回的数据格式不正确，应为数组')
    }
  }).catch(error => {
    console.error('查询电影标题失败：', error.message)
  })
}
</script>

<style>
/* 全局天蓝色主题 */
body {
  background-color: #e6f7ff; /* 浅蓝色背景 */
}

/* 毛玻璃效果 */
.glass-card {
  background: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动画效果 */
}

.glass-card:hover {
  transform: translateY(-5px); /* 悬停时上移 */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
}

/* 按钮样式 */
.btn-primary, .btn-success, .btn-warning, .btn-info {
  border-radius: 20px; /* 圆角按钮 */
  padding: 10px 20px; /* 按钮内边距 */
  font-weight: bold; /* 加粗字体 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* 动画效果 */
}

.btn-primary:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover {
  transform: scale(1.05); /* 悬停时放大 */
}

/* 表单输入框样式 */
.form-control {
  border-radius: 20px; /* 圆角输入框 */
  border: 1px solid #ced4da; /* 边框颜色 */
  padding: 10px 15px; /* 内边距 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 动画效果 */
}

.form-control:focus {
  border-color: #80bdff; /* 聚焦时边框颜色 */
  box-shadow: 0 0 5px rgba(128, 189, 255, 0.5); /* 聚焦时阴影 */
}
</style>